<template>
	<div class="home-left">
		<div class="section-header">
			<div class="header-title">
				<img src="@/assets/images/a-picture/line2.png" alt="" />
				<span>最新农业经营主体</span>
			</div>
		</div>
		<div class="view-row">
			<div class="view-filtration">
				<a-input-search class="home-ant-input" v-model:value="keywords" placeholder="请输入查询条件" style="width: 100%"
					@search="onSearch" />
			</div>
			<div class="view-filtration" style="margin-top: 10px;">
				<a-select class="cascader" v-model:value="value" show-search placeholder="请选择农业分类" style="width: 100%"
					:options="options" :filter-option="filterOption" @change="handleChange" :allowClear="true"></a-select>
			</div>
			<div class="view-list">
				<div class="view-item" v-if="list.length"  v-for="(item, i) in list" :key="i" @click="infoChange(item)">
					<div class="v-ranking">
						{{ item.id }}
						<img src="@/assets/images/a-picture/line.png" alt="" />
					</div>
					<div class="v-right">
						<div class="v-h1">{{ item.company_name }}</div>
						<div class="ds"> <span>所属区域：{{ item.address }} </span>
						</div>
						<div class="ds">
							<span> 分类：{{ item.industry_name }} </span>
						</div>
					</div>
				</div>
				<p style="margin-top: 20px;" v-else> <a-empty description="暂无数据" /></p>
			</div>
			<a-pagination class="pagination" v-model:current="current" @change="onChange" :page-size="15" simple
				:total="total" />
		</div>


		<a-modal v-model:open="open" :title="detail.company_name" @ok="handleOk" :footer="null"
			style="top: 400px;width: 1000px;height: 600px;position: relative;z-index: 100000;">

			<a-tabs v-model:activeKey="activeKey" :width="800">
				<a-tab-pane key="1" tab="公司详情">
					<div class="p">{{ detail.company_name }}</div>
					<div class="p"> 法人：{{ detail.legalperson }}</div>
					<div class="p">电话：{{ detail.phone }}</div>
					<div class="p">地区：{{ detail.address }}</div>
					<div class="p">地址：{{ detail.liveaddress }}</div>
					<div class="p"> 分类：{{ detail.industry_name }}</div>
					<div class="p"> 经营范围： {{ detail.businessscope }}</div>
				</a-tab-pane>
				<a-tab-pane key="2" tab="公司图册" force-render>
					<div v-if="imglist.length" class="imglist">

						<a-image :width="200"
							:src="`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`">
							<template #placeholder>
								<a-image
									src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
									:width="200" :preview="false" />
							</template>
						</a-image>
						<a-image :width="200"
							:src="`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`">
							<template #placeholder>
								<a-image
									src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
									:width="200" :preview="false" />
							</template>
						</a-image>
						<a-image :width="200"
							:src="`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`">
							<template #placeholder>
								<a-image
									src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
									:width="200" :preview="false" />
							</template>
						</a-image>
					</div>
					<p v-else> <a-empty description="暂无数据" /></p>
				</a-tab-pane>
				<a-tab-pane key="3" tab="公司财务报表">
					<!-- <a-table :columns="columns" :data-source="data" bordered>
                        <template #bodyCell="{ column, text }">
                            <template v-if="column.dataIndex === 'name'">
                                <a href="javascript:;">{{ text }}</a>
                            </template>
                        </template>
                    </a-table> -->

					<a-table :dataSource="dataSource" @change="applysDataTableChangeHandle" :pagination="pagination"
						:columns="columns" />
					<!-- <a-table :dataSource="dataSource" :columns="columns" /> -->
				</a-tab-pane>
			</a-tabs>
			<a-button v-if="activeKey == 3" class="export" style="width: 100px;" type="primary" block
				@click="exports()">导出</a-button>
		</a-modal>

	</div>
</template>
<script>
import KspMap from "@/components/map/utils/kspmap";
import svgimg from "@/assets/mapimg/point/mission-point.png";
import $ from "jquery";
import MapUtils from "@/components/map/utils/map-utils";
export default {
	name: 'HomeLeft',
	props: {
		address: '',
		KspMapclass: null,
		companyid: null, //选中的地图上点的id
	},
	data() {
		return {
			// 页面标题
			title: '首页',
			// 页面标题
			description: '首页',
			keywords: null, //搜索关键词
			current: 1, //分页
			options: [],
			open: null,
			infotitle: null, //公司详情
			activeKey: '1',
			random: null,
			list: [],
			total: 0,
			detail: {},
			classification: '',
			company_id: '',
			pagination: {
				defaultCurrent: 1,
				current: 1,
				defaultPageSize: 10,
				pageSize: 10,
				showQuickJumper: false,
				showSizeChanger: false,
				showTotal: (total, range) => `共${total}条`,
				total: 10,
			},

			dataSource: [],
			columns: [{
				title: '日期',
				dataIndex: 'date_time',
				key: 'date_time',
			},
			{
				title: '名称',
				dataIndex: 'name',
				key: 'name',
			},
			{
				title: '单价',
				dataIndex: 'price',
				key: 'price',
			},
			{
				title: '数量',
				dataIndex: 'num',
				key: 'num',
			},
			{
				title: '类型',
				dataIndex: 'unt',
				key: 'unt',
			},
			{
				title: '总金额',
				dataIndex: 'price_all',
				key: 'price_all',
			},
			],
			// 点图层
			pointlist: {
				styles: {
					img: {
						url: svgimg,
						size: [56, 56],
					},
				},
				id: "linepoin",
				name: "起点图层",
				data: [],
				zIndex: 9999999,
				overlay: true,
			},
			imglist: []//图片列表
		};
	},
	watch: {
		'address': function (newVal) {
			this.getdalist();
		},
		'KspMapclass': function (newVal) {
			this.showpoint()
		},

	},

	created() {
		this.getdata();
		// this.getdalist();
	},
	mounted() {
		this.getdalist();
	},
	methods: {
		applysDataTableChangeHandle(pagination, filters, sorter, ee) {
			this.pagination.current = pagination.current;
			this.pagination.pageSize = pagination.pageSize;
			this.getList();
		}, //操作分页控制

		getlist() {
			this.muajax.financelist({
				id: this.company_id,
				page: this.pagination.current,
			}).then((res) => {
				this.pagination.total = res.data.list.total;
				this.dataSource = res.data.list.data;
				console.log(this.dataSource)
			})
		},
		async exports() {
			window.open("http://scny.nclavi.com/api/finance/companyexpload?id=" + this.detail.user_id);
		},//导出
		getdalist() {
			this.muajax.companylist({
				page: this.page,
				classification: this.classification,
				address: this.address,
				keywords: this.keywords
			}).then((res) => {
				this.total = res.data.list.total;
				this.list = res.data.list.data
			})
		},
		// 绘制点
		showpoint() {
			if (this.KspMapclass) {

				this.clear()
				this.pointlist.data = []
				let Utils = new MapUtils();
				this.list.forEach(v => {
					if (v.latitude && v.longitude) {
						let geom = `SRID=4326;POINT(${v.longitude} ${v.latitude})`
						let position = Utils.getWkts([geom])[0];
						this.pointlist.data.push({
							id: v.id,
							type: "类型",
							position: position,
							name: v.company_name,
							data: {
								company_name: v.company_name
							},
							geometry: {
								type: "point",
								geom: geom, //
							},
							styles: this.pointlist.styles,
						})
					}
				})
				this.pointlist.data.forEach((ele, i) => {
					let featureJson = JSON.stringify(ele);
					let top = this.getTopJQElement(ele.name, featureJson);
					ele.overlays = [{
						id: this.pointlist.id + i,
						position: ele.position,
						positioning: "center-center",
						element: top[0],
						offset: [-10, -30],
						stopEvent: false,
					},];
				});
				// 线上面的坐标点
				if (this.pointlist.data.length) {
					this.KspMapclass.createVectorLayer(this.pointlist);
				}

			} else {
				setTimeout(() => {


					this.showpoint()
				}, 500)
			}
		},
		getTopJQElement(content, dataSet) {
			if (dataSet) {
				let str = dataSet.replace(/"/g, "&quot;");
				return $(
					`<div class="ol-popup-ripple" style="" data-feature="${str}"><p data-feature="${str}">${content}</p></div>`
				);
			}
			return $(
				`<div class="ol-popup-ripple"><p>${content}</p></div>`
			);
		},
		clear() {
			this.KspMapclass && this.KspMapclass.removeVectorLayer(this.pointlist.id, true);
		},
		getdata() {
			this.muajax.getindustry().then((res) => {
				this.options = res.data.list
			})
		},
		onChange(number) {
			this.page = number;
			this.getdalist();
		},
		// 页面跳转
		goTo(path) {
			this.$router.push(path);
		},
		onSearch(e) {
			this.getdalist();
		},
		handleChange(e) {
			this.classification = e;
			this.getdalist();
		},
		filterOption(input, option) {
			console.log(input, option)
			return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		/**
		 * 点击公司
		 * @param {*} item 
		 */
		infoChange(item) {
			this.open = true
			this.company_id = item.id;
			this.muajax.companydetail({
				id: item.id
			}).then((res) => {
				this.detail = res.data.detail;
			})

			this.getlist();
		},

		showModal() {
			this.open = true;
		},
		handleOk(e) {
			console.log(e);
			this.open = false;
		},
		sharedOnCell(_, index) {
			if (index === 4) {
				return {
					colSpan: 0
				};
			}
		}
	}
}
</script>
<style lang="less" scoped>
@import "@/assets/css/minxin.less";
@vw: 0.05208vw;

.section-header {
	// padding: 0px 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: url("@/assets/images/a-picture/line3.png") no-repeat center bottom;
	background-size: 100% 23px;
	margin-bottom: 8px;
	padding: 11px 10px;
	.flex-grow-0();

	.header-title {
		font-weight: bold;
		color: #14eba6;
		font-size: 16px;

		img {
			width: 11px;
			height: 20px;
			margin-right: 6px;
		}
	}

	.number {
		color: #ffffff;
		font-size: 14px;
		font-weight: bold;
	}
}

.home-left {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 369px;
	background: linear-gradient(90deg,
			rgba(0, 56, 46, 0.85) 50%,
			rgba(10, 75, 63, 0.05) 100%);
	padding: 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	z-index: 99;
	height: 100%
}

.view-row {
	.flex-grow-1();
	overflow-y: auto;
	width: 354px;
	background: rgba(6, 61, 56, 0.7);
	border: 1px solid #0e7d60;
	box-shadow: 0px 0px 10px 0px rgba(20, 235, 166, 0.5) inset;
	border-radius: 5px;
	padding: 14px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;

	.view-filtration {
		display: flex;
		align-items: center;
		height: 32px;
		background: #0a4b3f;
		border: 1px solid #0ba071;
		border-radius: 6px;

		.ant-select-selector {
			background: none;

		}

		.flex-grow-0();

		// padding-left: 17px;
		input {
			background: none;
			border: 0px;
			color: #fff;
			.flex-grow-1();

			&:focus {
				border-color: rgba(255, 255, 255, 0);
			}
		}
	}

	.view-list {
		.flex-grow-1();
		overflow-y: scroll;
		.gray-scroll-bar();
	}

	.searhfor {
		width: 32px;
		height: 32px;
		background: #0c5b4c;
		box-shadow: 0px 0px 8px 0px rgba(20, 235, 166, 0.5) inset;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}

	.view-item {
		width: 100%;
		// height: 76px;
		background: rgba(12, 96, 80, 0.65);
		border: 1px solid #076e4e;
		border-radius: 5px;
		padding: 14px;
		box-sizing: border-box;
		display: flex;
		margin-top: 14px;
		cursor: pointer;

		.v-ranking {
			.flex-grow-0;
			color: #ffffff;
			height: 18px;
			width: 18px;
			position: relative;
			text-align: center;
			font-size: 14px;
			color: #ffffff;
			margin-right: 10px;

			// .break1;
			img {
				position: absolute;
				bottom: 0px;
				left: 0px;
				width: 100%;
				// z-index: -1;
			}
		}

		.v-right {
			.flex-grow-1();

			// word-break: break-all;
			// text-overflow: ellipsis;
			// display: -webkit-box;
			// /** 对象作为伸缩盒子模型显示 **/
			// -webkit-box-orient: vertical;
			// /** 设置或检索伸缩盒对象的子元素的排列方式 **/
			// -webkit-line-clamp: 1;
			// /** 显示的行数 **/
			// overflow: hidden;

			/** 隐藏超出的内容 **/
			.ds {
				margin-top: 10px;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1;
				/** 显示的行数 **/
				overflow: hidden;

				/** 隐藏超出的内容 **/
			}

			.v-h1 {
				font-weight: bold;
				color: #14eba6;
				// .text-ellipsis;
				font-size: 16px;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				/** 对象作为伸缩盒子模型显示 **/
				-webkit-box-orient: vertical;
				/** 设置或检索伸缩盒对象的子元素的排列方式 **/
				-webkit-line-clamp: 1;
				/** 显示的行数 **/
				overflow: hidden;
			}

			span {
				font-size: 12px;
				color: #ffffff;
				opacity: 0.7;
			}
		}
	}

	.itemactive {
		background: #0c6050;
		border: 1px solid #0ba071;
		box-shadow: 0px 0px 18px 0px rgba(20, 235, 166, 0.5) inset;
	}
}

// input:-moz-placeholder {
//     color: #ccc;
// }

// input::-moz-placeholder {
//     color: #ccc;
// }

// input::-webkit-input-placeholder {
//     color: #ccc;
// }

// input:-ms-input-placeholder {
//     color: #ccc;
// }
.pagination {
	margin: 0px auto;
	padding-top: 10px;

	.ant-pagination-next button {
		color: #076e4e !important;
	}

	// color: #fff;
}


/deep/ .home-ant-input {
	height: 100%;
	line-height: 100%;

	.ant-input-group {
		height: 100%;
	}

	.ant-input {
		background: none;
		border: 0px;
		color: #fff;
		height: 100%;
		line-height: 100%;

		&::-ms-input-placeholder {
			color: #ccc;
		}

		&:-moz-placeholder {
			color: #ccc;
		}

		&::-moz-placeholder {
			color: #ccc;
		}

		&::-webkit-input-placeholder {
			color: #ccc;
		}

		&:-ms-input-placeholder {
			color: #ccc;
		}
	}

	.ant-btn-default {
		background-color: rgba(0, 56, 46, 0) !important;
		color: #fff !important;
		border: 0px !important;
		width: 32px;
		height: 32px;
		background: #0c5b4c;
		box-shadow: 0px 0px 8px 0px rgba(20, 235, 166, 0.5) inset;
		border-radius: 6px !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

// /deep/ .ant-pagination.ant-pagination-simple .ant-pagination-simple-pager input {
//     background: none;
//     border: solid 1px #0c5b4c;
//     color: #fff;
// }

/deep/ .ant-pagination {
	color: #fff;

	.ant-pagination-disabled .ant-pagination-item-link {
		color: #076e4e;
	}

	.ant-pagination .ant-pagination-next button,
	.ant-pagination-prev button {
		color: #076e4e;
	}

	.ant-pagination-next button {
		color: #076e4e;
	}

	.ant-pagination-simple-pager input {
		background: none;
		border: solid 1px #0c5b4c;
		color: #fff;
	}

}


.cascader {
	box-shadow: 0px 0px 30px 0px rgba(20, 235, 166, 0.5) inset;
	border-radius: 5px;
	background: rgba(6, 61, 56, 0.7);
	height: 100%;
	border: 0px solid rgba(11, 160, 113, 1);

	.ant-select-selector {
		background: none;

	}
}

/deep/ .view-filtration .ant-select-selector {
	background: none;
	color: #fff;
	border: 0px solid #d9d9d9;
	height: 100%;
	line-height: 32px;
	display: flex;
	align-items: center;

	.ant-select-selection-search-input {
		height: 32px;
		line-height: 30px;
	}

	.ant-select-selection-placeholder {
		color: #ccc;
	}

	.ant-select-selection-search-input {
		&::-ms-input-placeholder {
			color: #ccc;
		}

		&:-moz-placeholder {
			color: #ccc;
		}

		&::-moz-placeholder {
			color: #ccc;
		}

		&::-webkit-input-placeholder {
			color: #ccc;
		}

		&:-ms-input-placeholder {
			color: #ccc;
		}
	}

}

/deep/ .ant-select .ant-select-arrow {
	color: #fff
}


/deep/ .imglist .ant-image {
	margin: 10px;

}

.export {
	width: 100px;
	position: absolute;
	top: 55px;
	right: 20px;
}
</style>